<template>
    <div class='head'>
        <div class='top1'>
            <div class='top1_right'>
                <div v-if='isLogin' class='userComtent'>
                    <img class='userIcon' @click='goMyself' :src='require("@/assets/images/head/logo.png")' />
                    {{ user.name }}
                    <div @click='outLogin' class='outLogin'> 登出 </div>
                </div>
                <span v-if='!isLogin' class='loginBtn' @click='goLogin'>请登录</span>
            </div>
        </div>
        <!-- 网站标签 -->
        <div class='top2' v-if='menu=="1"'>
            <div>
                <img class='shouye' @click='goHome' :src='require("@/assets/images/head/head.png")' />
            </div>
            <div @click='headClick("1")' :class='{active: active=="1"}'>最新</div>
            <div @click='headClick("2")' :class='{active: active=="2"}'>美图</div>
            <div @click='headClick("3")' :class='{active: active=="3"}'>音乐</div>
            <div @click='headClick("4")' :class='{active: active=="4"}'>番剧</div>
        </div>
    </div>
</template>

<script>
import { get_cache , set_cache } from "@/util/cache.js"
import { getUserByToken  } from "@/api/login.js"
import { mapGetters } from 'vuex'
export default {
    data (){
        return {
            // user: this.user
            isLogin: false,
            active: "1"
        }
    },
    props: {
        loadLogin: {
            type: Function,
            default: ()=>{}
        },
        menu: {
            type: String,
            default: "1"
        },
        onActive: {
            type: Function,
            default: ()=> {}
        }
    },
    computed: {
        ...mapGetters(["user"])
    },
    mounted (){
        // 获取用户信息
        this.getUser();
    },
    methods: {
        headClick (num){
            this.active = num;
            this.onActive(num);
        },
        // 判断是否存在用户token
        getUser(){
            // var self = this;
            // 根据token获取用户信息
            getUserByToken().then((res)=>{
                if( res.data.code == 200 ){
                    var data = res.data.data;
                    for( var i in data ){
                        this.user[i] = data[i];
                    }
                    // this.user.id =
                    this.user.id = data.id = get_cache("token");
                    this.$store.dispatch("setUser",data)
                    this.isLogin = true;      
                    this.loadLogin(this.user); 
                }else{
                    
                }
                
                // this.user = res.data.data;
            });
        },
        goLogin (){
            // 根据路透跳转到
            this.$router.push('/login');
        },
        goHome (){
            // 根据路透跳转到
            this.$router.push('/');
        },
        goMyself (){
            // 根据路透跳转到
            this.$router.push('/myself');
        },
        outLogin (){
            this.$confirm('此操作将永久删除该文件, 是否继续?', '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
            }).then(() => {
                // 根据路透跳转到
                this.$router.push('/login');
                // 删除token
                set_cache("token","")
                this.$message({
                    type: 'success',
                    message: '成功登出!'
                });
            }).catch(() => {
                
            });
        }
    }
}
</script>

<style scoped>
    .loginBtn {
        cursor: pointer;
    }
    .loginBtn:hover {
        color:#f88c00;
    }
    .head {
        border-top: solid 1px #F88C00;
        border-bottom: solid 3px #F88C00;
        position: relative;
    }
    .top1 {
        border-top: solid 1px #ffffff;
        display:flex;
        justify-content: flex-end;
        background: #ffffff;
    }
    .top1_right {
        
    }
    .top2 {
        display: flex;
        background: #000000;
        color: #8e8e8e;
        font-size: 12px;
    }
    .shouye {
        width: 28px;
    }
    .top2 > div {
        padding: 4px 14px;
        display: flex;
        align-items: center;
        cursor: pointer;
        transition: 0.25s;
    }
    .top2 > div:hover,.top2 > div.active {
        background: #f88c00;
        color: #fff;
    }
    .userComtent {
        display: flex;
        align-items: center;
        font-size: 12px;
        color: #f88c00;
        padding: 6px;
    }
    .userIcon {
        width: 35px;
        height: 35px;
        border-radius: 50%;
        border: solid 1px #cacaca;
        margin-right: 5px;
        cursor: pointer;
    }
    .outLogin {
        color:#cacaca;
        margin-left:8px;
        cursor: pointer;
    }
    .outLogin:hover {
        color:#ff0000;
    }
</style>